<template>
  <div>
<clickhome></clickhome>
    <ul class="topbar">
      <li
        :class="isactive == 'recommend' ? 'active' : ''"
        @click="handleRecommend"
      >
        推荐
      </li>
      <li :class="isactive == 'hot' ? 'active' : ''" @click="handleHot">
        热门
      </li>
      <li
        :class="isactive == 'newpeople' ? 'active' : ''"
        @click="handleNewpeople"
      >
        新人
      </li>
      <li class="last" @click="handlesidebar">
        <van-icon name="apps-o" style="font-size: 20px" />筛选
      </li>
    </ul>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false"></van-overlay>
    <!-- 侧边栏 -->

    <div v-if="show" class="outsidebar">
      <div class="title">性别</div>
      <van-sidebar
        class="insidebar"
        v-model="activeKeysex"
        @change="onChangesex"
        v-if="sidebar"
      >
        <van-sidebar-item
          class="initsidebar"
          :title="data"
          v-for="(data, index) in searchType.sex"
          :key="index"
        />
      </van-sidebar>
      <div class="title">等级</div>
      <van-sidebar
        class="insidebar"
        v-model="activeKeygrading"
        @change="onChangegrading"
        v-if="sidebar"
      >
        <van-sidebar-item
          class="initsidebar"
          :title="data"
          v-for="(data, index) in searchType.grading"
          :key="index"
        />
      </van-sidebar>
      <div class="title">价格</div>
      <van-sidebar
        class="insidebar"
        v-model="activeKeyprice"
        @change="onChangeprice"
        v-if="sidebar"
      >
        <van-sidebar-item
          class="initsidebar"
          :title="data"
          v-for="(data, index) in searchType.price"
          :key="index"
        />
      </van-sidebar>
      <div class="submit" @click="searchitem">确定</div>
    </div>

    <!-- <screen></screen> -->
    <div class="wrapper" :style="{ height: height }" :key="list.length">
      <van-list
        class="innerbar"
        :loading="loading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
      >
        <van-cell
          class="van-cell"
          v-for="data in list"
          :key="data.id"
          @click="handlegriditem(data)"
        >
          <template #value>
            <span class="grading">{{ data.grading }}</span>
            <img :src="data.avatar" />
            <div style="font-size: 14px; color: #999">{{ data.nickname }}</div>
            <div>
              <span style="font-size: 10px; color: #999">
                <i
                  :class="data.sex == '女' ? 'icon-apparel' : 'icon-service'"
                  class="iconfont sex"
                  :style="{
                    background: data.sex == '女' ? '#FF4500 ' : '#99ccff',
                  }"
                ></i
                >{{ data.age }} | {{ data.city }} | {{ data.RefreshTime }}</span
              >
            </div>
            <div style="font-size: 10px; color: #999">
              接单{{ data.ordernum }}次
              <span class="priceout"
                >￥<span class="price">{{ data.price }}</span
                >/小时</span
              >
            </div>
            <div style="font-size: 10px; color: #999" class="artic">
              <span v-for="(item, index) in data.ptag" :key="index">{{
                item
              }}</span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
    <van-empty image="search"  v-if="emptyflag" description="没有找到相关要求的" />

  </div>
</template>
<script>
import getjson from '../directive/getjson'
import '../assets/iconfont/iconfont.css'
import clickhome from '../components/headers/clickHome.vue'
// import BScroll from "better-scroll";

export default {
  components: {
    clickhome
  },
  data () {
    return {
      emptyflag: false,
      show: false,
      sidebar: false,
      activeKeysex: 0,
      activeKeygrading: 0,
      activeKeyprice: 0,
      isactive: 'recommend',
      list: [],
      searchType: [],
      height: '0',
      loading: false,
      finished: false,
      page: 1,
      CountPage: 0,
      type: 0,
      dtid: '31540'
    }
  },
  methods: {
    searchitem () {
      this.page = 1
      this.emptyflag = false
      getjson(
        `https://yapi.tuwan.com/Lists/getSearchListApi/?type=${this.type}&dtid=${this.dtid}&length=10&page=${this.page}&sex=${this.activeKeysex}&grading=${this.activeKeygrading}&price=${this.activeKeyprice}&callback=_jsonp9944b1o1qjh`,
        (res) => {
          this.list = res.data
          this.show = false
          console.log(res)
          this.CountPage = res.CountPage
          if (this.list.length === 0) {
            this.emptyflag = true
          }
        }
      )
    },
    onChangeprice (i) {
      this.activeKeyprice = i
    },
    onChangegrading (i) {
      this.activeKeygrading = i
    },
    onChangesex (i) {
      this.activeKeysex = i
    },

    onLoad () {
      this.loading = true
      if (this.page >= this.CountPage) {
        this.finished = true
      }
      this.page++
      if (
        this.activeKeysex === 0 &&
        this.activeKeygrading === 0 &&
        this.activeKeyprice === 0
      ) {
        getjson(
          `https://yapi.tuwan.com/Lists/getListApi/?type=${this.type}&dtid=${this.dtid}&length=10&page=${this.page}&callback=_jsonp1456idxxo84`,
          (res) => {
            // console.log(res);
            this.list = [...this.list, ...res.data]
            this.loading = false
            // console.log(this.list, this.searchType);
            //  this.$nextTick(() => {
            //     new BScroll(".wrapper", {
            //       pullDownRefresh: { threshold: 50, stop: 20 },
            //       scrollbar: {
            //         fade: true,
            //         interactive: false, // 1.8.0 新增
            //       },
            //       pullUpLoad: { threshold: 50 },
            //       click: true, //事件生效 31
            //     });
            //   });
          }
        )
      } else {
        getjson(
        `https://yapi.tuwan.com/Lists/getSearchListApi/?type=${this.type}&dtid=${this.dtid}&length=10&page=${this.page}&sex=${this.activeKeysex}&grading=${this.activeKeygrading}&price=${this.activeKeyprice}&callback=_jsonp9944b1o1qjh`,
        (res) => {
          this.list = [...this.list, ...res.data]
          this.loading = false
        }
        )
      }
    },

    handleRecommend () {
      this.isactive = 'recommend'
      document.documentElement.scrollTop = 0
      this.type = 0
      this.page = 1
      getjson(
        `https://yapi.tuwan.com/Lists/getListApi/?type=${this.type}&dtid=${this.dtid}&length=10&page=1&callback=_jsonp1456idxxo84`,
        (res) => {
          // console.log(res);
          this.list = res.data
          this.searchType = res.searchType
          this.CountPage = res.CountPage
          // console.log(this.list, this.searchType);
        }
      )
    },
    handleHot () {
      this.isactive = 'hot'
      document.documentElement.scrollTop = 0
      this.type = 1
      this.page = 1
      getjson(
        `https://yapi.tuwan.com/Lists/getListApi/?type=${this.type}&dtid=${this.dtid}&length=10&page=1&callback=_jsonp1456idxxo84`,
        (res) => {
          // console.log(res);
          this.list = res.data
          this.searchType = res.searchType
          this.CountPage = res.CountPage

          // console.log(this.list, this.searchType);
        }
      )
    },
    handleNewpeople () {
      this.isactive = 'newpeople'
      document.documentElement.scrollTop = 0
      this.type = 2
      this.page = 1
      getjson(
        `https://yapi.tuwan.com/Lists/getListApi/?type=${this.type}&dtid=${this.dtid}&length=10&page=1&callback=_jsonp1456idxxo84`,
        (res) => {
          // console.log(res);
          this.list = res.data
          this.searchType = res.searchType
          this.CountPage = res.CountPage

          // console.log(this.list, this.searchType);
        }
      )
    },
    handlegriditem (data) {
      // console.log(data.id);
      this.$router.push(`/content?id=${data.id}`)
    },
    handlesidebar () {
      this.show = true
      this.sidebar = true
    }
  },

  mounted () {
    // this.height = document.documentElement.clientHeight-60 + "px";
    document.documentElement.scrollTop = 0
    this.loading = true
    this.dtid = location.href.match(/dtid=(\d+)/)[1]
    getjson(
      `https://yapi.tuwan.com/Lists/getListApi/?type=0&dtid=${this.dtid}&length=10&page=1&callback=_jsonp1456idxxo84`,
      (res) => {
        // console.log(res.searchType);
        this.list = res.data
        this.searchType = res.searchType
        this.CountPage = res.CountPage
        this.loading = false
        // console.log(this.list, this.searchType);
        //  this.$nextTick(() => {
        //     new BScroll(".wrapper", {
        //       pullDownRefresh: { threshold: 50, stop: 20 },
        //       scrollbar: {
        //         fade: true,
        //         interactive: false, // 1.8.0 新增
        //       },
        //       pullUpLoad: { threshold: 50 },
        //       click: true, //事件生效 31
        //     });
        //   });
      }
    )
  }
}
</script>
<style lang="scss" scoped>
ul.topbar {
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: #fff;
  color: #888;
  .last {
    border-bottom: 1px solid #888;
  }
  li {
    flex: 1;
    text-align: center;
  }
  .active {
    color: #f00;
  }
}
.sex {
  border-radius: 50%;
  color: #fff;
  margin-right: 4px;
}
.price {
  color: #f00;
  font-size: 20px;
}
.priceout {
  color: #f00;
  font-size: 14px;
  float: right;
}
.artic {
  margin-bottom: 5px;
  display: flex;
  width: 100%;
  span {
    font-size: 10px;
    display: inline-block;
    padding: 1px 2px;
    border: 1px solid #ccc;
    margin-right: 3px;
    color: #ccc;
  }
}
.wrapper {
  margin-top: 50px;
  // overflow: hidden;
  position: relative;
}
.innerbar {
  display: flex;
  padding: 6%;
  flex-wrap: wrap;
  justify-content: space-between;
  .van-cell {
    position: relative;
    padding: 0;
    box-shadow: 2px 2px 5px #999;
    border-radius: 5px;
    margin-bottom: 10px;
    background: #fff;
    width: 48%;
    img {
      border-radius: 5px 5px 0 0;
      width: 100%;
      height: 170px;
      object-fit: cover;
    }
    div {
      padding: 0 3px;
    }
    .grading {
      position: absolute;
      background: #ffcfa6;
      color: #fff;
      top: 140px;
      right: 10px;
      padding: 1px 10px;
      font-size: 12px;
      border-radius: 20%;
    }
  }
}
.outsidebar {
  position: fixed;
  z-index: 10;
  right: 0;
  top: 0;
  height: 100%;
  width: 80%;
  background: #fff;
  .insidebar {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    .initsidebar {
      width: 28%;
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin-bottom: 10px;
      border-radius: 10px;
    }
    .van-sidebar-item--select {
      background: #ff707a;
      color: #fff;
    }
  }
}
.van-sidebar-item--select::before {
  display: none;
}
.title {
  padding: 20px 10px;
}
.submit {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #ff626b;
  color: #fff;
  border-radius: 20px;
}
</style>
